<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品规格组</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-input
            v-model="queryInfo.query"
            placeholder="请输入内容"
            clearable
            @clear="getList"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" style="float:right">
          <el-button type="primary" icon="el-icon-plus" @click="create"
            >添加规格组</el-button
          >
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="listData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="规格组名称">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="created_at" label="添加日期"> </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="edit(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
            
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                 @click="handleDelete(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div>
          <Pagination :total="total" :page.sync="queryInfo.pageNum" :limit.sync="queryInfo.pageSize" class="pagination" @pagination="getList"/>
      </div>
    </el-card>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="specGroupModel"
        label-width="120px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="规格组名称" prop="name">
          <el-input
            v-model="specGroupModel.name"
            clearable
            maxlength="30"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? handleCreate() : handleUpdate()"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList,create, edit,destroy } from '@/api/specGroup'
import Pagination from '@/components/Pagination'
export default {
    name: 'SpecGroup',
    components: {Pagination},
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 20
      },
      specGroupModel: {
        name: '',
        id: ''
      },
      listData: [],
      total: 0,
      dialogVisible: false,
      dialogStatus: '',
      textMap: {
        create: '添加',
        update: '修改'
      },
      rules: {
        name: [{ required: true, message: '请填写规格组名称', tragger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //获取列表
    getList() {
      getList(this.queryInfo).then(response => {
        this.listData = response.data.data.list
        this.total = response.data.data.total
      })
    },
    handleSearch() {
       this.queryInfo.pageNum=1
       this.getList() 
    },
    handleSelectionChange(val) {},
    //添加页面
    create() {
      this.dialogVisible = true
      this.dialogStatus = 'create'
       this.$nextTick(() => {
       this.$refs.dataForm.resetFields()
      })  

    },
    //修改页面
    edit(row) {
      this.dialogVisible = true
      this.dialogStatus = 'update'
      this.specGroupModel.name = row.name
       this.specGroupModel.id = row.id
    },
    //新增操作
    handleCreate() {
        this.$refs['dataForm'].validate((valid)=>{
            if(!valid) return false;
            create(this.specGroupModel).then(()=>{
                  this.getList()
                  this.dialogVisible = false 
                  return this.$message.success('添加成功'); 
            })
        })
    },
    //修改操作
    handleUpdate() {
        this.$refs['dataForm'].validate((valid)=> {
            if(!valid) return false
             edit(this.specGroupModel).then(()=>{
                 this.getList()
                  this.dialogVisible = false 
                  return this.$message.success('修改成功'); 
             })
        })
    },
    handleDelete(row) {
        this.$confirm('是否删除该规格组','提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
          destroy(row.id).then(()=>{
               this.getList() 
               return this.$message.success('删除成功'); 
          })

      })
    }

  }
}
</script>
<style lang="less" scoped></style>
